<!DOCTYPE html>
<html>
  <head>
    <title>Material Design</title>
  </head>
  <body>
    <script src="build/build.js" type="text/javascript"></script>
    <script type="text/javascript">
      var shinyBear = require('shiny-bear');
      var Animation = shinyBear.Animation;
      var dom = shinyBear.dom;

      var scene = shinyBear.easySetup('#eee');

      var circle = dom('<div></div>').css({
        'position': 'absolute',
        'backgroundColor': '#f29233'
      });
      scene.add(circle);


      var button = dom('<button>button</button>').css({
        'position': 'absolute'
      });
      scene.add(button);

      var pic = new shinyBear.Picture('./res/1.jpg', {
        width: 200,
        height: 100,
        x: (window.innerWidth - 200) / 2,
        y: (window.innerHeight - 100) / 2
      });

      scene.add(pic);

      button.on('click', function() {
        var a = new Animation(100, 200);

        a.on('step', function(value) {
          pic.height = value;
          pic.y = (window.innerHeight - value) / 2;
          pic.render();
        });

        a.on('end', function() {
          setTimeout(function() {
            var a1 = new Animation(200, 400);
            a1.on('step', function(value) {
              pic.width = value;
              pic.x = (window.innerWidth - value) / 2;
              pic.render();
            });
            a1.on('end', function() {
              setTimeout(function() {
                var a2 = new Animation(0, window.innerWidth * Math.sqrt(2), 1500);
                a2.on('step', function(value) {
                  circle
                  .css('width', value * 2 + 'px')
                  .css('height', value * 2 + 'px')
                  .css('left', ((window.innerWidth - value * 2) / 2) + 'px')
                  .css('top', ((window.innerHeight - value * 2) / 2) + 'px')
                  .css('borderRadius', value + 'px');
                });
                shinyBearAnimationMgrs.add(a2);
              }, 500);
            });
            shinyBearAnimationMgrs.add(a1);
          }, 500);
        });

        shinyBearAnimationMgrs.add(a);

      });

    </script>
  </body>
</html>
